<script setup>
import { ref, onMounted } from 'vue'
import { listFriend } from '@/api/user'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'

const router = useRouter()
const friendsList = ref([])
const loading = ref(false)

const getFriendsList = async () => {
  try {
    loading.value = true
    const res = await listFriend()
    friendsList.value = res.data
  } catch (error) {
    showToast('获取好友列表失败')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  getFriendsList()
})
</script>

<template>
  <div class="friends-page">
    <van-nav-bar title="我的好友" left-arrow @click-left="$router.back()" />
    
    <van-skeleton title :row="3" :loading="loading" v-if="loading" />
    
    <div class="friends-list" v-else>
      <div class="friends-item" v-for="user in friendsList" :key="user.id">
        <div class="user-info" @click="router.push(`/user/${user.id}`)">
          <img :src="user.avatar" class="avatar" />
          <div class="info">
            <div class="username">{{ user.username }}</div>
            <div class="uid">ID: {{ user.uid }}</div>
            <div class="email">{{ user.email }}</div>
          </div>
        </div>
        <div class="action-buttons">
          <van-button 
            size="small" 
            type="primary"
            class="message-btn"
            @click="router.push(`/chat/${user.id}`)"
          >
            发消息
          </van-button>
        </div>
      </div>
      
      <div class="empty" v-if="friendsList.length === 0">
        <van-empty description="暂无好友" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.friends-page {
  min-height: 100vh;
  background: #f8f8f8;

  .friends-list {
    padding: 12px;

    .friends-item {
      background: #fff;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: all 0.3s;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      .user-info {
        display: flex;
        align-items: center;
        flex: 1;
        cursor: pointer;

        .avatar {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          object-fit: cover;
          margin-right: 12px;
          border: 2px solid #fff;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          transition: all 0.3s;

          &:hover {
            transform: scale(1.05);
          }
        }

        .info {
          .username {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin-bottom: 4px;
          }

          .uid {
            font-size: 12px;
            color: #999;
            margin-bottom: 2px;
          }

          .email {
            font-size: 12px;
            color: #999;
          }
        }
      }

      .action-buttons {
        .message-btn {
          border-radius: 20px;
          font-size: 14px;
          padding: 0 16px;
          height: 32px;
          line-height: 30px;
          transition: all 0.3s;
          background: #1989fa;
          border-color: #1989fa;

          &:hover {
            opacity: 0.8;
            transform: scale(1.05);
          }
        }
      }
    }

    .empty {
      margin-top: 100px;
    }
  }
}
</style> 